<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header back :title="title"></Header>
		<view class="wapper">
			<view class="content">
				<template v-if="list.length > 0">
					<view class="content-item" v-for="(v,k) in list" :key="k" @click="toDetail(v)">
						<view class="top">
							<image :src="getUrl(v.ImageUrl)" mode="widthFix"></image>
						</view>
						<view class="bottom">
							<view class="bottom-title">
								<div class="item">
									{{v.ZhiBoName}}
								</div>
								<div class="item">

									{{v.BeginTime}}
								</div>
							</view>
							<view class="bottom-date" :style="{backgroundColor:'#0d0cd4'}" @click.stop="toYuyue(v)">
								取消
							</view>
						</view>
						<u-popup :show="show" mode="center" closeable @close="close" width="">
							<div class="popcontainer">
								<div class="title">确认</div>
								<div class="input">
									是否要取消预约？
								</div>
								<div class="btns">
									<u-button type="info" text="取消" border @click="show = false"></u-button>
									<u-button type="primary" text="确定" border style="margin-left:20rpx"
										@click="yuyue"></u-button>
								</div>
							</div>
						</u-popup>
					</view>
				</template>
				<u-empty v-else descript="暂无数据" style="margin: 0 auto;"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import banner1 from '@/static/banner/banner1.png'
	export default {
		components: {
			Header
		},
		data() {
			return {
				height: 0,
				content: '',
				title: '我的预约',
				head: '',
				bannerList: [],
				user: '',
				list: [],
				show: false,
				current:''
			}
		},
		methods: {
			getYuyue(v) {
				switch (v) {
					case 0:
						return '预约'
					case 1:
						return '已预约'
				}
			},
			close() {
				this.show = false
			},
			toYuyue(v) {
				this.show = true
				this.current = v
			},
			toDetail(v) {
				window.open(v.LinkUrl)
			},
			async yuyue(v) {
				let res = await this.$api.yuyue({
					OpenID: this.user.OpenID,
					ZhoBoID: this.current.ZhiBoID
				})
				this.show = false
				let res2 = await this.$api.getYuYueList({
					OpenID: this.user.OpenID
				})
				this.list = res2.UserData
			}
		},
		async onPullDownRefresh() {
			this.searchParams.pageindex = 1
			let res = await this.$api.getYuYueList({
				OpenID: this.user.OpenID
			})
			this.list = res.UserData
			uni.stopPullDownRefresh()
		},
		async mounted() {
			this.user = uni.getStorageSync('user')
			let res = await this.$api.getYuYueList({
				OpenID: this.user.OpenID
			})
			this.list = res.UserData
			console.log(this.list)
		},
		created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom
		}
	}
</script>

<style scoped lang="scss">
	.popcontainer {
		padding: 20rpx 40rpx;
	
		.title {
			font-size: 32rpx;
			text-align: center;
			margin: 20rpx 0;
		}
	
		.input {}
	
		.btns {
			margin-top: 40rpx;
			display: flex;
	
		}
	}
	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		.wapper {
			flex: 1;
			background: #f2f2f2;
			padding: 20rpx;
			z-index: 100;
			margin-top: -280rpx;

			// overflow: auto;
			.content {
				height: 100%;
				overflow: auto;
				padding: 20rpx;

				.content-item {
					margin-bottom: 30rpx;
					width: 100%;
					border-radius: 20rpx;
					overflow: hidden;
					background: #fff;

					.top {
						image {
							width: 100%;
							height: 300rpx;
						}
					}

					.bottom {
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.bottom-title {
							font-size: 26rpx;
							flex: 1;
							margin-right: 20rpx;
						}

						.bottom-date {
							width: 50rpx;
							text-align: right;
							font-size: 24rpx;
							padding: 20rpx 40rpx;
							border-radius: 10rpx;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>